<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed />
    </div>
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" immediate-check>
        <article-item
          v-for="item in articleList"
          :key="item.art_id"
          :title="item.title"
          :author="item.aut_name"
          :count="item.comm_count"
          :time="item.pubdate"
          :img="item.cover"
          :id="item.art_id"
          :hide="false"
          @click.native="$router.push({ path: `/art_detail/${item.art_id}` })"
        ></article-item>
      </van-list>
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/Articleitem.vue'
import { getSearchArticleAPI } from '@/api/search.js'
export default {
  name: 'SearchResult',
  data() {
    return {
      articleList: [],
      finished: false,
      loading: false,
      page: 1
    }
  },
  methods: {
    onLoad() {
      this.page++
      this.updatedArticle()
      this.loading = false
    },
    async updatedArticle() {
      const res = await getSearchArticleAPI({ q: this.$route.params.keyword, page: this.page })
      if (res.data.data.results.length === 0) {
        this.finished = true
        return
      }
      this.articleList = [...this.articleList, ...res.data.data.results]
    }
  },

  created() {
    this.updatedArticle()
  },

  components: {
    ArticleItem
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
